<template>
    <van-tree-select height="100vh" :items="items" :main-active-index.sync="active" @click-nav="treeClick">
        <template #content style="margin-top: 20px">
           <div v-for="item in 10" :key="item">
               <div v-if="active === active">
                   <div v-for="(catalog2) in catalog2s" :key="catalog2.id">
                       <p style="margin-top: 20px; background-color: #999999">{{catalog2.name}}</p>
                       <van-grid :column-num="3">
                           <van-grid-item v-for="(catalog3) in catalog2.catalog3s"
                                          :key="catalog3.id"
                                          icon="photo-o"
                                          :text="catalog3.name"
                                          @click="catalog3Click(catalog3.id)"></van-grid-item>
                       </van-grid>
                   </div>
               </div>
           </div>
        </template>
    </van-tree-select>
</template>

<script>
    import Vue from 'vue';
    import { TreeSelect, } from 'vant';
    import {ApiService} from "../../axios/apiService";

    const catalog1 = new ApiService('/iteam/catalog1')
    Vue.use(TreeSelect);
    export default {
        props: {
        },
        data() {
            return {
                index:'',
                active: 0,
                items: [],
                catalog2s:[]
            }
        },
        mounted() {
            this.getCatalog1()
        },
        methods:{
            getCatalog1() {
                catalog1.getViewList().then(res => {
                    res.data.forEach(item=>{
                      this.items.push(this.beforeDataProcess(item))
                    })
                })
                },
            beforeDataProcess(data) {
                return{
                    text:data.name,
                    id:data.id,
                }
            },
            treeClick(index) {
                catalog1.getViewById(index).then(res=>{
                    this.catalog2s=res.data;
                })
            },
            catalog3Click(catalog3Id) {
                console.log(catalog3Id);
                this.$router.push({name:"item-pmsSpu",params:{catalog3Id:catalog3Id}})
            }
        }
    };
</script>
